<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css()                   功能：
		                         1个参：传入css属性名
								 功能：获取匹配元素集合中第一个元素的css属性值
								 2个参：
								 n个参：
		 width()和height()
		 outerWidth()和outerHeight()
		 -->
		 <style>
			 .box{
				 background-color: aqua;
				 padding:20px;
				 margin: 20px;
				 border: 5px solid red;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: bold;
			 }
		 </style>
		<script src="../js/jquery-1.11.0.min.js"></script>
	</head>
	<body>
		<!-- 创建两个div平行  6个按钮 -->
		<!-- 1.效果显示区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn"> 设置多属性效果 </button>
		<button id="gsbtn"> 获取元素宽度/设置元素宽度 </button>
		<button id="bpBtn"> 获取高度（内边距+边框） </button>
		<button id="bpmbtn"> 获取高度（内外边距+边框） </button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/*1.点击 获取颜色属性值 按钮 获取颜色值并打印页面上*/
			 $("#getColorbtn").click(function(){ 
				var bgColor=$(".box").css("background-color");
				//页面上打印属性值 rgb(0, 255, 255)
				$("#result").text("获取属性值是："+bgColor)
			 });
			/*2.点击 设置颜色属性值 按钮 设置颜色值并打印页面上*/ 
			$("#setColorbtn").click(function(){
				//改成橙色
				$(".box").css("background-color","orange");
				$("#result").text("改变后颜色为：橙色")
			}); 
			/* 3.点击 设置多属性效果 按钮 圆、背景色、阴影 */
			$("#setBtn").click(function(){
				$(".box").css({"background-image":"url(../img/1.gif)",
				               "border":"5px solid #ff0",
							   "width":"300px",
							   "height":"300px",
							   "background-size":"100% 100%",
							   "border-radius":"50%",
							   "box-shadow":"5px 5px 10px #ff0"
				});
			});
			/* 4.点击 获取、设置宽度 */
			$("#gsbtn").click(function(){
				var w=$(".box").width(400);
				$("#result").text("获取的宽度是："+w+"px");
			});
			/* 5.点击 获取高度 按钮 计算box空间高度 */
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
				$("#result").text("获取高度为："+bp+"px");
			});
			/* 6. */
			$("#bpmbtn").click(function(){
				var bp=$(".box").outerHeight(true);
				$("#result").text("获取高度为："+bp+"px");
			});
		</script>
	</body>
</html>